<template>
  <div class="basicCollapse">
    <el-divider content-position="left">{{$t('设备名称')}}</el-divider>
    <div style="width:120px;display:inline-block;">{{$t('设备名称：')}}</div>
    <el-input v-emoji v-model="record.name" ref="name" size="small" :maxlength="64" style="width:400px;"></el-input>
    <el-button type="primary" size="small" @click="nameChange" class="setting1">{{$t('设置')}}</el-button>
    <el-divider content-position="left">{{$t('系统当前时间')}}</el-divider>
    <div style="width:120px;display:inline-block;">{{$t('当前时间：')}}</div>
    <el-date-picker v-model="date" ref="datetime" size="small" type="datetime" :placeholder="$t('选择日期时间')" align="right" @focus='pickerOptions3' @blur="pickerOptions2" @change="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss">
    </el-date-picker>
    <el-divider content-position="left">{{$t('NTP校时服务器')}}</el-divider>
    <div style="width:120px;display:inline-block;">{{$t('NTP校时服务器：')}}</div>
    <el-input v-emoji v-model="ntp" ref="ntp" size="small" style="width:400px;"></el-input>
    <el-button type="primary" size="small" @click="ntpChange" class="setting2">{{$t('设置')}}</el-button>
  </div>
</template>
<script>
import { getBasicInfo, editBasicName, getSystemTime, getNtp, setSystemTime, setNtp } from '@/api/system/basic'
import moment from 'moment'
export default {
  name: 'Basic',
  data () {
    return {
      activeNames: ['1', '2', '3'],
      record: {
        name: ''
      },
      date: null, // date time
      dateNumber: null, // 自动递增的时间戳
      updateStop: false, // 点开时间选择器时停止更新时间
      ntp: ''
    }
  },
  filters: {
    updatetime: function (value) {
      return moment(value).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  created () {
    getBasicInfo().then(res => {
      if (res.status === 0) {
        this.record.name = res.info[0].name.replace(`\n`, '')
      }
    })
    getNtp().then(res => {
      if (res.status === 0) {
        this.ntp = res.info[0].server
      }
    })
    this.timeStar()
  },
  mounted () {
    this.$refs.name.$refs.input.classList.value += ' name'
    this.$refs.ntp.$refs.input.classList.value += ' ntp'
    this.$refs.datetime.$refs.reference.$refs.input.classList.value += ' datetime'
  },
  beforeDestroy () {
    this.timeOver()
  },
  methods: {
    pickerOptions (val) {
      var time = val.split(' ')
      setSystemTime({ date: time[0], time: time[1] }).then(res => {
        if (res.status === 0) {
          getSystemTime().then(res => {
            if (res.status === 0) {
              this.dateNumber = new Date(res.info[0].date).getTime()
            }
          })
          this.$message({
            message: this.$t('设置成功'),
            type: 'success'
          })
        }
      })
    },
    pickerOptions2 (val) {
      this.updateStop = false
    },
    pickerOptions3 (val) {
      this.updateStop = true
    },
    timeStar () {
      getSystemTime().then(res => {
        if (res.status === 0) {
          this.dateNumber = new Date(res.info[0].date).getTime()
          let _this = this
          _this.date = moment(_this.dateNumber).format('YYYY-MM-DD HH:mm:ss')
          this.timer = setInterval(() => {
            _this.dateNumber += 1000
            if (!this.updateStop) {
              _this.date = moment(_this.dateNumber).format('YYYY-MM-DD HH:mm:ss')
            }
          }, 1000)
        }
      })
    },
    timeOver () {
      if (this.timer) {
        clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
      }
    },
    nameChange () {
      if (this.record.name && this.record.name.length > 64) {
        this.$messages.error(this.$t('设备名称不能超过64个字节'))
      } else {
        editBasicName(this.record).then(res => {
          if (res.status === 0) {
            this.$message({
              message: this.$t('设置成功'),
              type: 'success'
            })
          }
        })
      }
    },
    ntpChange () {
      // if (this.ntp) {
      setNtp({ server: this.ntp }).then(res => {
        if (res.status === 0) {
          this.$message({
            message: this.$t('设置成功'),
            type: 'success'
          })
        }
      })
      // } else {
      //   this.$message({
      //     message: this.$t('输入内容为空'),
      //     type: 'error'
      //   })
      // }
    }
  }
}
</script>
<style lang="less">
.basicCollapse {
  margin: 20px auto;
  max-width: 1000px;
  padding-top: 1px;

  .el-divider__text {
    font-size: 18px;
    font-weight: 600;
  }

  .el-divider {
    margin: 40px 0 30px;
  }
}
</style>
